<template>
  <div class="page">
    <div class="flex align-center" :style="chooseType === 0 ? 'visibility: visible' : 'visibility: hidden'">
      <div class="tab-title" :class="chooseTitle === 0 ? 'active' : ''" @click="chooseTitle = 0">年级详情</div>
      <div class="tab-title" :class="chooseTitle === 1 ? 'active' : ''" @click="chooseTitle = 1">班级详情</div>
    </div>
    <div class="flex" style="height: calc(100% - 30px)" v-px-to-vw>
      <Grade v-if="chooseType === 0 && chooseTitle === 0"></Grade>
      <ClassInfo v-if="chooseType === 0 && chooseTitle === 1"></ClassInfo>
      <schoolAsset v-if="chooseType === 1"></schoolAsset>
      <div class="right-container">
        <div class="box-top">
          <div style="flex: 1">
            <div class="center-body">
              <div class="flex" style="flex-direction: column; justify-content: center; gap: 6px" v-px-to-vw>
                <div class="flex align-center center-data">
                  <div class="img-bg">
                    <img v-px-to-vw style="width: 50px; height: 50px" src="@/assets/images/profile/leader/data-6.png" alt="" />
                  </div>
                  <div>
                    <div class="data-num">{{ ref_schoolInfo.land_area }}</div>
                    <div class="data-text">学校占地总面积</div>
                  </div>
                </div>
                <div class="flex align-center center-data">
                  <div class="img-bg">
                    <img src="@/assets/images/profile/leader/data-4.png" alt="" />
                  </div>
                  <div>
                    <div class="data-num">{{ ref_schoolInfo.teacher_count }}人</div>
                    <div class="data-text">教职工总数</div>
                  </div>
                </div>
                <div class="flex align-center center-data">
                  <div class="img-bg">
                    <img src="@/assets/images/profile/leader/data-2.png" alt="" />
                  </div>
                  <div>
                    <div class="data-num">{{ ref_schoolInfo.student_count }}人</div>
                    <div class="data-text">学生总数</div>
                  </div>
                </div>
              </div>
              <div ref="typeRef" class="flex" style="justify-content: center; flex-grow: 1; text-align: center; transition: all 0.3s ease">
                <div @click="clickType(0)" :class="chooseType === 0 ? 'name-bg-l' : 'name-bg-s'" class="flex align-center" style="flex-direction: column; cursor: pointer;">
                  <span>教育</span><span>教学</span>
                </div>
                <div @click="clickType(1)" :class="chooseType === 0 ? 'name-bg-s' : 'name-bg-l'" class="flex align-center" style="flex-direction: column; cursor: pointer;">
                  <span>资产</span><span>后勤</span>
                </div>
              </div>
              <div class="flex" style="flex-direction: column; justify-content: center; gap: 6px" v-px-to-vw>
                <div class="flex align-center center-data" style="justify-content: flex-end">
                  <div>
                    <!-- 45.256m² -->
                    <div class="data-num">{{ ref_schoolInfo.school_building_floor_area }}</div>
                    <div class="data-text">校舍建筑总面积</div>
                  </div>
                  <div class="img-bg">
                    <img v-px-to-vw style="width: 50px; height: 50px" src="@/assets/images/profile/leader/data-5.png" alt="" />
                  </div>
                </div>
                <div class="flex align-center center-data" style="justify-content: flex-end">
                  <div>
                    <div class="data-num">{{ ref_schoolInfo.specialized_classroom }}间</div>
                    <div class="data-text">专用教室</div>
                  </div>
                  <div class="img-bg">
                    <img v-px-to-vw style="width: 59px; height: 31px" src="@/assets/images/profile/leader/data-3.png" alt="" />
                  </div>
                </div>
                <div class="flex align-center center-data" style="justify-content: flex-end">
                  <div>
                    <div class="data-num">{{ ref_schoolInfo.ordinary_classroom }}间</div>
                    <div class="data-text">普通教室</div>
                  </div>
                  <div class="img-bg">
                    <img src="@/assets/images/profile/leader/data-1.png" alt="" />
                  </div>
                </div>
              </div>
              <img class="center-bottom" src="@/assets/images/profile/leader/center-1.png" alt="" />
            </div>
          </div>
          <eduRight v-if="chooseType === 0"></eduRight>
          <assetRight v-if="chooseType === 1"></assetRight>
        </div>
        <div class="box-bottom">
          <eduBottom v-if="chooseType === 0"></eduBottom>
          <assetBottom v-if="chooseType === 1"></assetBottom>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { nextTick, onMounted, ref } from "vue";
import ClassInfo from "./components/classInfo.vue";
import Grade from "./components/grade.vue";
import eduRight from "./components/eduRight.vue";
import assetRight from "./components/assetRight.vue";
import eduBottom from "./components/eduBottom.vue";
import assetBottom from "./components/assetBottom.vue";
import schoolAsset from "./components/schoolAsset.vue";
import * as leaderApi from '@/api/leaders'
let chooseTitle = ref(0);
let chooseType = ref(0);
const typeRef = ref(null);
function clickType(type) {
  chooseType.value = type;
  if (type === 0) {
    typeRef.value.style.transform = "translateX(60px)";
  } else {
    typeRef.value.style.transform = "translateX(-60px)";
  }
}

const ref_schoolInfo = ref({});


// 学校基本信息
const schoolInfo = async () => {
    leaderApi.schoolInfo().then(res => {
        ref_schoolInfo.value = res.data[0];
    });
}



onMounted(() => {
  clickType(0);
  nextTick(() => {
    schoolInfo();
    
  });
});
</script>
<style lang="scss" scoped>
.chart-container {
  width: 100%;
  height: 100%;
}
.page {
display: flex;
  flex-direction: column;
  height: calc(100% - 20px);
  width: calc(100% - 40px);
  margin: 10px 20px;
  padding: 10px 20px;
  box-sizing: border-box;
  background-color: rgba(22, 40, 56, 0.5);
  
  // 科技感发光边框效果
  position: relative;
  border-radius: 8px;
  
  // // 创建伪元素实现发光边框
  // &::before {
  //   content: '';
  //   position: absolute;
  //   top: -2px;
  //   left: -2px;
  //   right: -2px;
  //   bottom: -2px;
  //   background: linear-gradient(45deg, #00a7ff, #00fff0, #00ffb2, #00a7ff);
  //   background-size: 400% 400%;
  //   border-radius: 8px;
  //   z-index: -1;
  //   animation: techGlowBorder 3s ease infinite;
  //   filter: blur(8px);
  //   opacity: 0.8;
  // }
  
  // // 添加内层边框
  // &::after {
  //   content: '';
  //   position: absolute;
  //   top: 0;
  //   left: 0;
  //   right: 0;
  //   bottom: 0;
  //   border: 1px solid rgba(0, 167, 255, 0.6);
  //   border-radius: 8px;
  //   box-shadow: 
  //     inset 0 0 10px rgba(0, 167, 255, 0.3),
  //     0 0 20px rgba(0, 167, 255, 0.2);
  //   z-index: -1;
  // }
  
  // // 科技感边框动画
  // @keyframes techGlowBorder {
  //   0% {
  //     background-position: 0% 50%;
  //     opacity: 0.5;
  //   }
  //   50% {
  //     background-position: 100% 50%;
  //     opacity: 0.5;
  //   }
  //   100% {
  //     background-position: 0% 50%;
  //     opacity: 0.5;
  //   }
  // }




  .tab-title {
    color: #fff;
    font-size: 14px;
    border-left: 3px solid #00a7ff;
    margin-left: 8px;
    padding: 4px 8px;
    cursor: pointer;
  }
  .active {
    background: linear-gradient(180deg, rgba(64, 149, 229, 0) 0%, rgba(52, 124, 175, 0.5) 50.3%, rgba(64, 149, 229, 1) 100%);
  }
  .right-container {
    height: 100%;
    flex: 1;
    .box-top {
      height: 65%;
      display: flex;
      justify-content: flex-end;
    }
    .box-bottom {
      height: 35%;
      display: flex;
      margin-left: 20px;
    }
  }
}
.center-body {
  width: 100%;
  height: 85%;
  margin-bottom: 30px;
  background-image: url("@/assets/images/profile/leader/center-2.png");
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-content: center;
  .name-bg-s {
    width: 123px;
    height: 123px;
    background-image: url("@/assets/images/profile/leader/center-s.png");
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-content: center;
    margin: auto 0;
    font-size: 28px;
    line-height: 1.2;
  }
  .name-bg-l {
    width: 190px;
    height: 190px;
    background-image: url("@/assets/images/profile/leader/center-l.png");
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-content: center;
    margin: auto 0;
    font-size: 40px;
    line-height: 1.2;
    cursor: pointer;
  }
  .center-data {
    .img-bg {
      width: 80px;
      height: 100px;
      background-image: url("@/assets/images/profile/leader/data-bg.png");
      background-size: 100% 100%;
      background-position: center;
      background-repeat: no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 6px;
      cursor: pointer;
    }
    img {
      width: 45px;
      height: 45px;
    }
  }
.data-num {
  font-size: 24px;
  font-weight: bold;
  color: #00FFF0;
  text-shadow: 0 0 10px rgba(0, 255, 240,1);
  background: linear-gradient(90deg, #00FFF0, #00C1FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding: 5px 0px;
  border-radius: 5px;
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* 数据数值悬停效果 */
.data-num:hover {
  transform: scale(1.05);
  transition: all 0.3s ease;
  text-shadow: 0 0 15px rgba(0, 255, 240, 0.9);
}

/* 数据数值动画效果 */
.data-num::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 240, 0.2), transparent);
  animation: shine 2s infinite;
  border-radius: 5px;
}

/* 闪光动画 */
@keyframes shine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
  .data-text {
    font-size: 14px;
    margin-top: 8px;
  }
}
.center-bottom {
  position: absolute;
  bottom: -90px;
  width: 100%;
  height: 50%;
}
</style>
